<template>
  <div class="w-full h-full">
    <ul class="w-full h-full min-w-32 flex flex-col overflow-y-auto">
      <Scrollbar>
        <li v-for="(item, index) in list" :key="index" :class="[
          'flex',
          'flex-row',
          'px-2',
          'py-4',
          'h-20',
          'items-center',
          'justify-between',
          'cursor-pointer',
          'rounded',
          'gap-3',
          'select-none',
          {
            // 'hover:bg-orange-100': item['id'] != data.userId,
            'bg-orange-200': item['id'] == data.userId,
          },
        ]" @click="() => {
          if (item['id'] === data.userId) {
            return;
          }
          data.userId = item['id'];
          $emit('click', index, item);
        }
          ">
          <div class="h-12 w-12">
            <img v-if="item['to_avatar']" class="rounded h-full" :src="item['to_avatar']" :alt="item['to_id']" />
            <div v-else
              class="rounded h-full w-full bg-orange-400 text-white text-[20px] flex items-center justify-center">
              {{ item['to_name'][0] }}
            </div>
          </div>
          <div class="flex-1 flex flex-row items-center justify-between  overflow-hidden">
            <div class="flex-1 flex flex-col gap-1 min-w-0 relative">
              <div v-if="item['new'] == 1" class="w-3 h-3 rounded-full bg-red-600 absolute right-0 top-0" />
              <span class="truncate text-[14px]">
                {{ item['to_name'] }} · {{ item['from_name'] }}
              </span>
              <span class="truncate text-[13px] text-gray-500" v-html="textToEmoji(item['content'])" />
            </div>
            <div class="w-20 text-right">
              <!-- whitespace-nowrap 使文本不自动换行  -->
              <span class="text-gray-600 text-[12px] whitespace-nowrap">
                {{
                  item['msg_time']
                    ? item['msg_time'].slice(5, 16)
                    : ''
                }}
              </span>
            </div>
          </div>
        </li>
      </Scrollbar>
    </ul>
  </div>

  <!-- <div class="chatList">
    <ul class="chatList-ul">
      <li class="chatList-ul__list" v-for="(item, index) in list" :key="index" @click="() => {
        if (item['id'] === data.userId) {
          return;
        }
        data.userId = item['id'];
        $emit('click', index, item);
      }
        ">
        <div class="chatList-ul__list_avatar">
          <img v-if="item['to_avatar']" class="avatar" :src="item['to_avatar']" :alt="item['id']">
          <div v-else class="show_avatar">
            {{ item['to_name'][0] }}
          </div>
        </div>

        <div class="chatList-ul__list_content">
          <div class="chatList-ul__list_content_left">
            <span class="chatList-ul__list_content_left_top">
              <div v-if="item['new'] == 1" class="w-3 h-3 rounded-full bg-red-600 absolute top-1 right-1" />
              {{ item['to_name'] }} ・ {{ item['from_name'] }}
            </span>
            <span class="chatList-ul__list_content_left_bottom">
              {{ item['content'] }}
            </span>
          </div>
          <div class="chatList-ul__list_content_right">
            <span class="hatList-ul__list_content_right_time">{{ item['msg_time'].slice(5) }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div> -->
</template>


<script setup lang="ts">
import { reactive } from 'vue';
import { type IProps } from './props';
import { type IEmits } from './emits';
import { textToEmoji } from '@/utils/render';
import './style.css'
import Scrollbar from '../scrollbar/Scrollbar.vue';

const props = withDefaults(defineProps<IProps>(), {
  list: () => [],
});

defineEmits<IEmits>();

const data: { userId?: string } = reactive({
  userId: undefined,
});

const event = {
  reset() {
    data.userId = undefined;
  },
};

defineExpose({
  reset: event.reset,
});
</script>